<template>
  <div class="dashboard-main">
    <!-- 时钟 -->
    <h1>{{ currentStr }}</h1>
    <!-- 基础图表 -->
    <div id="baseChart1" class="base-chart" />
    <!-- 订单图标 -->
    <div class="order-chart">
      <OrderCharts :order-data="orderData" />
    </div>
    <!-- 销量动画 -->
    <div class="sale-count">
      <SalesCountTo />
    </div>
    <!-- 饼图 -->
    <div class="pei-chart">
      <PieCharts />
    </div>
    <!-- 字符云,词云 -->
    <div class="zf-cloud">
      <ZfCloud />
    </div>
    <!-- 地图 -->
    <div class="china-chart">
      <ChinaMapCharts />
    </div>

  </div>
</template>

<script>
// require commonjs规范的模块化书写方式,nodejs天然支持,但是浏览器不支持
// import es6模块化规范,出现的比require晚,nodejs不支持,浏览器也不支持.需要依赖babel(webpack配置)转换为require语法才能使用
// 所以在webpack中一般采用require引入,而代码中直接使用import使因为webpack帮助解析了.
var echarts = require('echarts')
// import * as echarts from 'echarts'
import OrderCharts from './components/OrderCharts'
import SalesCountTo from './components/SalesCountTo'
import PieCharts from './components/PieCharts'
import ZfCloud from './components/ZfCloud'
import ChinaMapCharts from './components/ChinaMapCharts'
import { initOrderData } from './data.js'
import { parseTime } from '@/utils/index'
export default {
  name: 'Dashboard',
  components: {
    OrderCharts,
    SalesCountTo,
    PieCharts,
    ZfCloud,
    ChinaMapCharts
  },
  data() {
    return {
      orderData: initOrderData(),
      currentStr: ''
    }
  },
  computed: {

  },
  created() {
    // 初始化始终定时器
    setInterval(() => {
      // this.currentStr = new Date().toLocaleTimeString()
      this.currentStr = parseTime(new Date())
    }, 1000)
  },
  // 在页面dom渲染完毕后触发
  mounted() {
    this.initBaseChart()
  },
  methods: {
    initBaseChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('baseChart1'))
      var options = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 绘制图表
      myChart.setOption(options)
    }
  }
}
</script>
<style>
  body{
    background-color: #F0F2F5;
  }

</style>
<style lang="scss" scoped>
  .dashboard-main{
    .base-chart{
      width: 400px;
      height: 300px;
      border: 1px solid red;
    }
    .order-chart{
      width: 800px;
      height: 400px;
      border: 1px solid red;
      margin: 50px;
    }
    .pei-chart{
      width: 400px;
      height: 400px;
      border: 1px solid red;
      margin: 50px;
    }
    .zf-cloud{
      width: 400px;
      height: 400px;
      border: 1px solid red;
      margin: 50px;
    }
    .china-chart{
      width: 600px;
      height: 400px;
      border: 1px solid red;
      margin: 50px;
    }
  }
</style>
